<template>
  <div class="index-container">
    <van-nav-bar :title="title" :safe-area-inset-top="true" />
    <main>
      <router-view></router-view>
    </main>
    <van-tabbar active-color="#000" inactive-color="#999" v-model="active" route :safe-area-inset-bottom="true">
      <van-tabbar-item to="/cookbook">
        <span>菜谱大全</span>
        <template #icon="props">
          <img :src="props.active ? cookbookActive : cookbook" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/category">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? menuActive : menu" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/more">
        <span>更多</span>
        <template #icon="props">
          <img :src="props.active ? moreActive : more" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import cookbook from '@/assets/images/cookbook.png';
import cookbookActive from '@/assets/images/cookbook-active.png';
import menu from '@/assets/images/menu.png';
import menuActive from '@/assets/images/menu-active.png';
import more from '@/assets/images/more.png';
import moreActive from '@/assets/images/more-active.png';

const route = useRoute();

const active = ref(0);
const title = ref('');

watch(() =>
  route.meta.title
  , (newTitle) => {
    title.value = newTitle;
  }, {
  immediate: true
})
</script>

<style scoped lang="scss">
.index-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}


::v-deep .van-nav-bar__title {
  color: #fff;
}

::v-deep .van-nav-bar__content {
  background-color: #ED742E;
}

main {
  flex: 1;
  overflow-y: scroll;
  padding-bottom: 60px;
}
</style>
